<template>
  <div>
    <!-- 事件修饰符 -->
    <!-- 01: stop -->
    <!-- <div class="big" @click="bigFn">
        <div class='small' @click.stop="smallFn"></div>
    </div>-->
    <!-- 02:.self -->
    <!-- <div class="big" @click.self="bigFn">
      <div class="small" @click="smallFn"></div>
    </div>-->
    <!-- .capture 事件捕获-->
    <!-- <div class="big" @click.capture="bigFn">
      <div class="small" @click="smallFn"></div>
    </div>-->
    <!-- <form action="https://www.baodu.com" @submit.prevent>
      <input type="text" name="user" v-model="username" />
      <input type="text" name="password" v-model="pwd" />
      <button type="submit" @click="submitFn()">提交</button>
    </form>-->

    <!-- 表单修饰符 -->
    <!-- <input type="text" @keyup.enter="keyupsubmitFn" /> -->

    <!-- v-model 的修饰符  -->
    <!-- 将input 事件修改为失焦事件 -->
    <!-- <input type="text" v-model.lazy="count" /> -->
    <!-- <input type="text" v-model.number="count" /> -->
    <!-- <input type="text" v-model.trim.number="count" /> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 100,
      username: "",
      pwd: ""
    };
  },
  methods: {
    bigFn() {
      console.log("big");
    },
    smallFn() {
      console.log("small");
    },
    submitFn() {
      console.log(this.username, this.pwd);
      // 调用接口
    },
    keyupsubmitFn(e) {
      console.log(e.target.value);
    }
  }
};
</script>
<style scoped>
.big {
  width: 200px;
  height: 200px;
  background: red;
}
.small {
  width: 100px;
  height: 100px;
  background: yellow;
}
</style>